<template>
      <div class="loginBox">
            <!-- 登录头部 begin -->
            <header id="header">
                  <i class="retreat" @click="$router.go(-1)"></i>
                  <span>京东登录</span>
            </header>
            <!-- 登录头部 end -->
            
            <!-- 登录方式类型 begin -->
            <div class="loginTypeBox">
                  <div class="loginType" @click="loginAc">
                        <span class="loginTypeText typeTextCheck">账号密码登录</span>
                  </div>
                  <div class="loginType" @click="loginPh">
                        <span class="loginTypeText">短信验证码登录</span>
                  </div>
            </div>
            <!-- 登录方式类型 end -->

            <!-- 登录操作 begin -->

            <!-- 账号登录 begin -->
            <div class="loginOperBox">
                  <div id="loginAcount">
                        <div class="inputWrap">
                              <span>账号</span>
                              <input type="text" placeholder="用户名/邮箱/已验证手机" class="loginWrite" v-model="acountUser" @input="imgShow" @blur="imgCancel">
                              <i class="usernameImg" style="display:none" @click="inputEmpty"></i>
                        </div>
                        <div class="inputWrap">
                              <span>密码</span>
                              <input type="password" placeholder="请输入密码" class="loginWrite loginPas" v-model="acountPas" @input="imgShow" @blur="imgCancel">
                              <i class="usernameImg usernameImg2" style="display:none" @click="pasEmpty"></i>
                              <img src="/static/img/hide_password.png" class="passwordImg passwordImg1" @click="changeImg" v-show="showEye">
                              <img src="/static/img/show_password.png" class="passwordImg passwordImg2" @click="changeImg" v-show="!showEye">
                        </div>
                        <div class="notice">&nbsp;</div>
                        <a class="loginBtn" :class="{loginAct:loginAct1}" @click="loginDj">登 录</a>
                  </div>
                  <!-- 账号登录 end -->
           
                   <!-- 手机验证登录 begin -->
                   <div id="loginPhone" class="displayNone">
                         <div class="inputWrap">
                              <span class="CountryNum">+86</span>
                              <span class="countryMore"></span>
                              <input type="text" placeholder="请输入手机号" class="loginWrite writePhone" v-model="phoneUser" @input="imgShow" @blur="imgCancel">
                              <i class="usernameImg usernameImg3" style="display:none" @click="phoneEmpty"></i>
                              <button class="getValidate" v-text="getValid" @click="getCode"></button>
                        </div>
                        <div class="inputWrap">
                              <input type="text" placeholder="请输入收到的验证码" class="loginWrite writeValidate
                              " v-model="phonePas" @input="imgShow" @blur="imgCancel">
                              <i class="usernameImg" style="display:none" @click="validEmpty"></i>
                        </div>
                        <div class="notice">&nbsp;</div>
                        <a class="loginBtn" :class="{loginAct:loginAct2}" @click="loginDj">登 录</a>
                   </div>
                  <!-- 手机验证登录 end -->

                  <!-- 一键登录验证 begin -->
                  <a class="loginOne">一键登录</a>
                  <!-- 登录验证 end -->

                  <!-- 忘记密码 手机注册 begin -->
                  <div class="otherOperBox">
                        <a href="#" class="forgetP">忘记密码</a>
                        <a href="#/mine/register" class="forgetP phoneR">手机快速注册</a>
                  </div>
                  <!-- 忘记密码 手机注册 end -->

                  <!-- 其他方式登录 begin -->
                  <div class="otherType">
                        <p class="otherTypeTitle">其他登录方式</p>
                        <div class="QQloginBox">
                              <a href="#" class="QQlogin"></a>
                              <a href="#" class="WXlogin"></a>
                        </div>
                        <span class="iAgreen">登录即代表您已同意<a href="#" class="agreenJd">京东隐私政策</a></span>
                  </div>
                  <!-- 其他方式登录 end -->
                  
            </div>
            <!-- 登录操作 end -->
      </div>
</template>
<script>
export default {
      data(){
            return{
                  acountUser:'',
                  acountPas:'',
                  phoneUser:'',
                  phonePas:'',
                  getValid:'获取验证码',
                  showEye:true
            }
      },
      methods:{
            // 账户登录方法
            loginAc(){
                  this.jq('#loginAcount').removeClass('displayNone')
                  this.jq('#loginPhone').addClass('displayNone')
                  this.jq('.loginTypeText').removeClass('typeTextCheck')
                  this.jq(event.target).addClass('typeTextCheck')
                 
            },
            // 手机验证登录方法
            loginPh(){
                  this.jq('#loginAcount').addClass('displayNone')
                  this.jq('#loginPhone').removeClass('displayNone')
                  this.jq('.loginTypeText').removeClass('typeTextCheck')
                  this.jq(event.target).addClass('typeTextCheck')
                 
            },
            // 获取验证码的倒计时
            getCode(){
                  var reg=/^1[3-9]\d{9}/
                  if(reg.test(Number(this.phoneUser))){
                        let num=120;
                        let t=setInterval(()=>{
                              this.getValid="重新发送("+num+"s)";
                              num--;
                              this.jq('.getValidate').prop('disabled',true);
                              if(num==-1){
                                    this.getValid="获取验证码";
                                    this.jq('.getValidate').prop('disabled',false);
                                    clearInterval(t);
                              }
                        },1000);
		      }
            },
            // 登录京东
            loginDj(){
                  localStorage.username=this.acountUser
                  localStorage.password=this.acountPas
                  this.$router.push({ path:'/index/mine'})
            },
            // 改变密码是否可见
            changeImg(){
                  if(this.jq('.loginPas').prop('type')=='password'){
                        this.jq('.loginPas').prop('type','text')
                  }else{
                        this.jq('.loginPas').prop('type','password')
                  }
                  this.showEye=!this.showEye
            },
            // 清空i账户框的数据
            inputEmpty(){
                  this.acountUser=''
                  this.jq(event.target).prev('input').focus()
            },
            // 清空密码框数据
            pasEmpty(){
                  this.acountPas=''
                  this.jq(event.target).prev('input').focus()
            },
            // 清空手机号码
            phoneEmpty(){
                  this.phoneUser=''
                  this.jq(event.target).prev('input').focus()
            },
            // 清空验证码
            validEmpty(){
                  this.phonePas=''
                  this.jq(event.target).prev('input').focus()
            },
            // 清空图片出现
            imgShow(){
                  var tg=event.target
                  setTimeout(()=>{this.jq(tg).next().css('display','block')},100)
            },
            // 清空图片消失
            imgCancel(){
                  var tg=event.target
                  setTimeout(()=>{this.jq(tg).next().css('display','none')},100)
            }
      },
      computed:{
            loginAct1(){
                  if( this.acountUser!=''&& this.acountPas!=''){
                        return true
                  }else{
                        return false
                  }
            },
            loginAct2(){
                  if(this.phoneUser!=''&& this.phonePas!=''){
                        return true
                  }else{
                        return false
                  }
            }
      }
}
</script>
<style>
/* 注册页面头部设置 begin */ 
.loginBox{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: white;
}
#header{
      width: 100%;
      height: 3.6rem;
      line-height: 3.6rem;
      text-align: center;
      color: #616161;
      font-size: 17px;
      background: #f9f9f9;
      border-bottom: 1px solid #bbb;
}
.retreat{
      width: 2rem;
      height: 2rem;
      position: absolute;
      left: 1rem;
      top: 1rem;
      background: url('/static/img/login.png') no-repeat 0 -61px;
      background-size:1.8rem auto;
}
/* 注册页面头部设置 end */ 

/*登录方式设置 begin*/ 
.loginTypeBox{
      width: 100%;
      display: flex;
      height: 3.7rem;
      line-height: 3.7rem;
      border-bottom: 1px solid #d7d7d7;
}
.loginType{
      width: 50%;
      font-size: 14px;
      text-align: center;
      color: #333;
}
.loginTypeText{
      padding:1.1rem 0.9rem;
}
.typeTextCheck{
       border-bottom: 2px solid #f23030;
}
/*登录方式设置 end*/ 

/* 登录操作 begin*/ 
/*账号登录 begin*/ 
.loginOperBox{
      box-sizing: border-box;
      padding: 0 1.67rem 1.67rem 1.67rem;
}
.inputWrap{
      height: 4rem;
      line-height: 4rem;
      border-bottom: 1px solid #d7d7d7;
      box-sizing: border-box; 
      font-size: 14px;
      padding-left: 0.4rem;
      position: relative;
}
.loginWrite{
      margin-left: 2.3rem;
      border: 0;
      outline: 0;
}
.loginWrite::-webkit-input-placeholder{
    transform: scale(1.05);
    transform-origin: left center;
    color:#ccc
}
.passwordImg{
      width: 2.5rem;
      float: right;
      margin-top: 1.3rem;
      margin-right: 0.5rem;
}
.usernameImg{
      width: 1.8rem;
      height: 1.8rem;
      position: absolute;
      top: 50%;
      margin-top: -0.9rem;
      background:url('/static/img/iconBg.png') no-repeat;
      background-size: 100% auto;
}
.usernameImg2{
      right:4rem; 
}
.usernameImg3{
      right:11rem; 
}
/*账号登录 end*/ 

/*手机验证操作 begin*/ 
.CountryNum{
      margin-left:1.3rem;
      font-size: 13px;
}
.countryMore{
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid #ABABAB;
      display: inline-block;
      margin: 0 4px 0 2px;
      padding-top: 1px;
}
.writePhone{
      margin-left:0;
}
.getValidate{
      box-sizing: border-box;
      width: 10rem;
      border: 0;
      border-left: 1px solid #d7d7d7;
      height: 2rem;
      line-height: 2rem;
      outline: 0;
      background-color: #fff;
      color: #848689;
      margin-left: 1rem;
}
.writeValidate{
      margin-left: 0.2rem
}
/*手机验证操作 begin*/ 

/*登录验证 begin*/ 
.notice{
      width: 100%;
      height: 2.5rem;
}
.loginBtn{
      display: block;
      height: 3.75rem;
      line-height: 3.75rem;
      color: #848689;
      background: #eee;
      border-radius: 2px;
      text-align: center;
      font-size: 14px;
}
.loginOne{
      display: block;
      color: #f23030;
      border: 1px solid #f23030;
      margin-top: 1rem;
      border-radius: 2px;
      height: 3.75rem;
      line-height: 3.75rem;
      text-align: center;
      font-size: 14px;
}
/*登录验证 end*/ 

.loginAct{
      background-color: #f23030;
      color: white;
}
/*忘记密码和手机快速注册 begin*/ 
.otherOperBox{
      margin-top: 1.7rem;
}
.forgetP{
      color: #333;
      display: block;
      height: 1.8rem;
      background: url('/static/img/login.png') no-repeat left -22px;
      background-size: 1.8rem auto;
      padding-left: 2rem;
      line-height: 1.8rem;
      float: left;
}
.phoneR{
      background: url('/static/img/login.png') no-repeat left -41px;
      background-size: 1.8rem auto;
      float: right;
}
/*忘记密码和手机快速注册 end*/

/*其他登录方式 begin*/ 
.otherType{
      margin-top: 12rem;
      border-top: 1px solid #d7d7d7;
      padding: 3.3rem 0.5rem 0 0.5rem;
      height: 9rem;
      position: relative;
      text-align: center;
}
.otherTypeTitle{
      position: absolute;
      top: -1rem;
      left: 50%;
      background-color: white;
      width: 10rem;
      color: #bfbfbf;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      margin-left: -5rem;
}
.QQloginBox{
      width: 10rem;
      margin: 0 auto;
}
.QQlogin{
      display: block;
      width: 2rem;
      height: 2rem;
      background: url('/static/img/login.png') no-repeat center -132px;
      background-size: 1.9rem auto;
      float: left;
}
.WXlogin{
      display: block;
      width: 2rem;
      height: 2rem;
      background: url('/static/img/login.png') no-repeat center -158px;
      background-size: 1.9rem auto ;
      float: right;
}
.iAgreen{
      display: block;
      margin: 4rem auto;
      font-size: 14px;
      color: #333;
}
.agreenJd{
      color: #333;
      text-decoration: underline;
}
/*其他登录方式 end*/ 
.displayNone{
      display: none;
}
/* 登录操作 end*/ 
</style>


